<template>
    <div class="common">
        <el-container>
            <el-header class="header">
                <h3 class="logo">CMIMS</h3>
                <h3>社区医疗信息后台管理系统</h3>
                <el-dropdown split-button @command="handleClick">
                    <el-avatar v-if="loginData.user_img" class="avatar" :size="25" :src="loginData.user_img" />
                    <el-avatar v-else class="avatar" :size="25" src="src\assets\imgs\默认头像.png" />
                    &nbsp;
                    <span>{{ loginData.name }}</span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="$router.push('/updatePassword')">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <left-menu></left-menu>
                </el-aside>
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import LeftMenu from "@/views/home/LeftMenu.vue";
import { RouterView } from "vue-router";
export default {
    components: {
        LeftMenu,
        RouterView
    },
    data() {
        return {
            loginData: {}
        }
    },
    methods: {
        handleClick(command) {
            if (command == 'logout') {
                sessionStorage.clear();
                this.$router.push('/login');
            }
        }
    },
    created() {
        let userInfo = sessionStorage.getItem('user');
        if (userInfo) {
            this.loginData = JSON.parse(userInfo);
        } else {
            this.$router.push('/login');
        }
    },
}
</script>

<style scoped>
.common,
.el-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.header {
    background-color: #007BFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    font-family: "楷体";
    letter-spacing: 0.3em;
}

.header .logo {
    height: 100%;
    font-family: '思源黑体';
    font-style: italic;
}

.el-main {
    background-image: url("@/assets/imgs/主页背景图.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: bottom;
}
</style>